---
import '../styles/global.css';
import BaseLayout from "../layouts/BaseLayout.astro";

const pageTitle = "关于我";

const identity = {
    firstName: "莎拉",
    country: "加拿大",
    occupation: "技术摸稿人",
    hobbies: ["摄影", "观鸟", "棒球"],
}

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;
const skillColor = "navy";
---
<BaseLayout pageTitle={pageTitle}>

    <h1>{pageTitle}</h1>
    <h2>...和我的新 Astro 网站！</h2>

    <p>我正在学习 Astro 入门教程，这是我网站上的第二个页面，也是我自己建立的第一个页面！</p>

    <p>随着我完成更多教程，该站点将更新，所以请继续查看我的旅程将如何进行吧</p>

    <p>以下是关于我的几个事实: </p>
    <ul>
        <li>我的名字是{identity.firstName}</li>
        <li>我住在{identity.country}。我的职业是{identity.occupation}。</li>
        {
            identity.hobbies.length >= 2 &&
                <li>我的两个习惯: {identity.hobbies[0]}和{identity.hobbies[1]}</li>
        }
    </ul>
    <p>我的技能是: </p>
    <ul>
        {skills.map(skill =>
                <li class="skill">{skill}</li>)}
    </ul>
    {happy && <p>我非常乐意学习 Astro！</p>}
    {finished && <p>我完成了这节教程！</p>}
    {goal == 3 ? <p>我的目标是在三天内完成。</p> : <p>我的目标不是 3 天。</p>}
</BaseLayout>

<style define:vars={{skillColor}}>
    h1 {
        color: purple;
        font-size: 4rem;
    }

    .skill {
        color: var(--skillColor);
        font-weight: bold;
    }
</style>